<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .show {
            width: 200px;
            height: 200px;
            background-color: grey;
            /* 这个是css中的元素隐藏 */
            display: none;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="search">
            <!-- placeholder 是文本框默认内容 -->
            <input type="text" id="val" placeholder="请输入课程">
            <!-- submit 是发送表单 -->
            <input type="submit" id="sub">
        </div>
        <!-- 这个是隐藏的提示框 -->
        <div class="show">
            <p>哈哈哈哈哈</p>
        </div>
    </div>
</body>
<script>
    let arr = ['web前端开发技术 198元', '后端开发技术 199元', '软件测试', 'java工程师', 'c++开发', '想躺平']  //这里一个6个
    let input = document.querySelector('#val');
    let show = document.querySelector('.show');
    //  1. 键盘抬起事件 键盘输入的时候显示show框
    input.onkeyup = function () {
        show.style.display = 'block';

        //  3. 如果想要用arr里面的数据 那肯定是要遍历先 遍历拿到数据  后续方便渲染到show框
        let str = '';
        arr.forEach(item => {
            // console.log(item); // 控制台可以看到arr里面的数据啦
            // 4. 拿到数据后 我们需要判断用户输入的内容 是否 和数组里面的数据匹配; input.value是文本里里面的内容(用户输入的)
            let res = item.indexOf(input.value)  //item.indexOf()就是当前元素的索引号 括号里就是需要匹配的数据  -1就是不匹配
            console.log(str);
            if (res != -1) {
                str += '<p>' + item + '</p>'
            }
        });
        // 5.接下来就是拿到数据 渲染到网页上啦
        if (!input.value || !str) {
            show.innerHTML = '<p>暂无结果</p>'
        } else {
            show.innerHTML = str;
        }
    }
    //2.
    input.onblur = function () {
        show.style.display = 'none';
    }

</script>

</html>